import QtQuick 2.0

Rectangle {
    id: box
    width: 200
    height: 450
    anchors.centerIn: parent
    color: "gray"
    border.color: "black"

    Column {
        spacing: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 50
        Rectangle {
            id: light1
            width: 120
            height: 120
            radius: width
            color: Qt.lighter("gray")
            border.color: "lightgray"
        }
        Rectangle {
            id: light2
            width: 120
            height: 120
            radius: width
            color: Qt.lighter("gray")
            border.color: "lightgray"
        }
    }

    MouseArea {
        id: ma
        anchors.fill: parent
        onClicked: {
            // stop -> go -> warn
            if (mouse.button === Qt.LeftButton) {
                switch (parent.state) {
                case "stop":
                    parent.state = "go"
                    break
                case "go":
                    parent.state = "warn"
                    break
                case "warn":
                    parent.state = "stop"
                    break
                }
            } else {
                parent.state = (parent.state == "stop" ? "go" : "stop")
            }
        }
    }

    state: "stop"
    states: [
        State {
            name: "stop"
            // 按条件启用
            // when: ma.pressed
            PropertyChanges { target: light1; color: "red" }
            PropertyChanges { target: light2; color: "black" }
        },
        State {
            name: "go"
            PropertyChanges { target: light1; color: "black" }
            PropertyChanges { target: light2; color: "green" }
        },
        State {
            name: "warn"
            PropertyChanges { target: light1; color: "yellow" }
            PropertyChanges { target: light2; color: "yellow" }
        }
    ]

    transitions: [
        Transition {
            from: "stop"
            to: "go"
            ColorAnimation {
                target: light1
                from: "red"; to: "black"
                duration: 200
            }
            ColorAnimation {
                target: light2
                from: "black"; to: "green"
                duration: 200
            }
        },
        Transition {
            from: "go"
            to: "stop"
            ColorAnimation {
                target: light1
                from: "black"; to: "red"
                duration: 200
            }
            ColorAnimation {
                target: light2
                from: "green"; to: "black"
                duration: 200
            }
        },
        Transition {
            from: "go"
            to: "warn"
            ColorAnimation {
                target: light1
                from: "black"; to: "yellow"
                duration: 200
            }
            ColorAnimation {
                target: light2
                from: "green"; to: "yellow"
                duration: 200
            }
        },
        Transition {
            from: "warn"
            to: "stop"
            ColorAnimation {
                target: light1
                from: "yellow"; to: "red"
                duration: 200
            }
            ColorAnimation {
                target: light2
                from: "yellow"; to: "black"
                duration: 200
            }
        }
    ]
}

